<template>
  <el-table
    :header-cell-style="{
      background: '#F5F7FA',
      color: '#000',
    }"
    :data="list.items"
    stripe
    border
    style="width: 100%"
  >
    <el-table-column type="selection" width="55" align="center" />
    <el-table-column
      prop="username"
      label="登录用户"
      width="140"
      align="center"
    />
    <el-table-column prop="ip" label="ip" width="170" align="center" />
    <el-table-column
      prop="agent"
      label="agent信息"
      width="300"
      align="center"
    />
    <el-table-column prop="os" label="操作系统" width="170" align="center" />
    <el-table-column prop="country" label="国家" width="90" align="center" />
    <el-table-column prop="province" label="省" width="90" align="center" />
    <el-table-column prop="city" label="市" width="90" align="center" />
    <el-table-column prop="district" label="县/区" width="120" align="center" />
    <el-table-column prop="isp" label="运营商" width="100" align="center" />
    <el-table-column
      prop="create_datetime"
      label="登录时间"
      width="230"
      align="center"
    />
    <el-table-column align="center" label="操作">
      <template #default="{ row }">
        <el-button type="success" @click="lookLog(row)">
          <el-icon size="16"><View /></el-icon>
          <div class="line"></div> </el-button
      ></template>
    </el-table-column>
  </el-table>
  <el-drawer v-model="table" :with-header="false" size="50%">
    <div class="drawer-header">
      <div class="icon" @click="close">
        <el-icon><Close /></el-icon>
      </div>
      <div class="title">日志详情</div>
    </div>
    <div class="drawer-from">
      <el-form
        :label-position="labelPosition"
        :model="drawerLog"
        label-width="100px"
        style="max-width: 460px"
        class="drawer-from-item"
      >
        <el-form-item label="登录用户">
          <el-input v-model="drawerLog.username" clearable />
        </el-form-item>
        <el-form-item label="agent信息">
          <el-input v-model="drawerLog.agent" clearable />
        </el-form-item>
        <el-form-item label="操作系统">
          <el-input v-model="drawerLog.os" clearable />
        </el-form-item>
        <el-form-item label="国家">
          <el-input v-model="drawerLog.country" clearable />
        </el-form-item>
        <el-form-item label="市">
          <el-input v-model="drawerLog.city" clearable />
        </el-form-item>
        <el-form-item label="运营商">
          <el-input v-model="drawerLog.isp" clearable />
        </el-form-item>
        <el-form-item label="英文全称">
          <el-input v-model="drawerLog.country_english" clearable />
        </el-form-item>
        <el-form-item label="经度">
          <el-input v-model="drawerLog.longitude" clearable />
        </el-form-item>
      </el-form>
      <el-form
        :label-position="labelPosition"
        :model="drawerLog"
        label-width="100px"
        style="max-width: 460px"
        class="drawer-from-item"
      >
        <el-form-item label="IP">
          <el-input v-model="drawerLog.ip" clearable />
        </el-form-item>
        <el-form-item label="浏览器">
          <el-input v-model="drawerLog.browser" clearable />
        </el-form-item>
        <el-form-item label="州">
          <el-input v-model="drawerLog.continent" clearable />
        </el-form-item>
        <el-form-item label="省">
          <el-input v-model="drawerLog.province" clearable />
        </el-form-item>
        <el-form-item label="县/区">
          <el-input v-model="drawerLog.district" clearable />
        </el-form-item>
        <el-form-item label="区域代码">
          <el-input v-model="drawerLog.area_code" clearable />
        </el-form-item>
        <el-form-item label="国家代码">
          <el-input v-model="drawerLog.country_code" clearable />
        </el-form-item>
        <el-form-item label="纬度">
          <el-input v-model="drawerLog.latitude" clearable />
        </el-form-item>
      </el-form>
    </div>
  </el-drawer>
</template>

<script setup>
import { onMounted } from "vue";

defineProps({
  list: {
    type: Object,
    default: [],
  },
});

const table = ref(false);
const labelPosition = ref("right");
const drawerLog = ref("");
const lookLog = (row) => {
  table.value = true;
  drawerLog.value = row;
};
const close = () => {
  table.value = false;
};
</script>

<style scoped>
.drawer-header {
  position: relative;
  height: 40px;
  color: #000000d9;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
  border-radius: 2px 2px 0 0;
  display: flex;
}

.drawer-header .icon {
  cursor: pointer;
  margin-top: 3px;
  margin-right: 10px;
}

.drawer-header .title {
  font-size: 16px;
}

.drawer-from {
  margin-top: 20px;
  display: flex;
  flex-flow: row wrap;
}

.drawer-from .drawer-from-item {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
}
</style>

